<template>
	<view class="chess-container">
		<view class="chess fade-in" :class="classname" @click="choose(point)">

		</view>
	</view>
</template>

<script>
	export default {
		name: "hulu-chess",
		props: {
			classname: {
				type: String,
				default: ""
			},
			point: {
				type: Object,
				default: {}
			}
		},
		emits: ["hold"],
		data() {
			return {};
		},
		created() {

		},
		methods: {
			choose(point) {
				this.$emit("hold", point)
			}
		}
	}
</script>

<style scoped lang="scss">
	.chess-container {

		.chess {
			width: 160rpx;
			height: 160rpx;
			line-height: 160rpx;
			border-radius: 160rpx;
			box-sizing: border-box;
			text-align: center;
			position: relative;
			overflow: auto;
			font-size: 20rpx;
		}

		.white_chess {
			width: 160rpx;
			height: 160rpx;
			opacity: 1;
			background: radial-gradient(34.09% 35.8%, rgba(255, 255, 255, 1) 0%, rgba(208, 208, 208, 1) 100%);
			box-shadow: inset -2px -2px 10px rgba(133, 133, 133, 0.25), inset -12px -14px 15.99px rgba(255, 255, 255, 0.32), 2px 2px 8px rgba(255, 255, 255, 0.7), 4px 4px 8px rgba(0, 0, 0, 0.49);
		}

		.black_chess {
			width: 160rpx;
			height: 160rpx;
			opacity: 1;
			background: radial-gradient(34.09% 35.8%, rgba(120, 120, 120, 1) 0%, rgba(2, 2, 2, 1) 100%);
			box-shadow: inset -2px -2px 10px rgba(0, 0, 0, 0.25), inset -12px -14px 15.99px rgba(150, 150, 150, 0.32), 2px 2px 8px rgba(255, 255, 255, 0.7), 4px 4px 8px rgba(0, 0, 0, 0.49);
		}

		.empty_chess {
			background: transparent;
			position: relative;
		}

		.empty_chess::after {
			content: "";
			position: absolute;
			border-radius: 50%;
			background-color: black;
			left: 50%; //起始是在body中，横向距左50%的位置
			top: 50%;
			transform: translate(-50%, -50%);
			width: 30rpx;
			height: 30rpx;
		}

		.active {
			transform: scale(1.2);
			transition: .5s;
		}
	}
</style>